@import './varibles';

// reset
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
  margin:0;
  padding:0;
}

* {
  box-sizing: border-box;
}

button, input, select, textarea {
  outline:0
}
input button {
  border: none;
}
// a {
//   text-decoration:none;
//   &:hover {
//   color: map-get($colors, 'primary') !important;
//   }
// }
img {
  border: none;
}
li {
  list-style:none
}
h6 {
  font-size:1em
}

html {
  font-size: 16px;
  line-height: 1rem;
}
body {
  -webkit-font-smoothing:antialiased;
  font-family:"-apple-system", BlinkMacSystemFont, Roboto, "Helvetica Neue", "MIcrosoft YaHei", sans-serif!important;
  background-color: map-get($colors, 'bgcolor');
}

// 生成样式
// colors   text-white  bg-white
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color
  }
  .bg-#{$colorKey} {
    background-color: $color
  }
}

// text-align
@each $val in (left, center, right) {
  .text-#{$val} {
    text-align: $val
  }
}

// text font-size fz-12
@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $font-base-size * $size
  }
}

// text overflow
.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// width height  基本样式
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}
.fw-b {
  font-weight: bold;
}
.clearfix:after {
  content:" ";
  visibility:hidden;
  display:block;
  height:0;
  clear:both
}
.shadow {
  box-shadow: 2px 4px 4px;
  color: #eee;
}

// 媒体查询  1190 960

  @media screen and (max-width:1190px) {
    .mt-container {
      width: 960px;
    }
    .special {
      display: none !important;
    }
  }
  @media screen and (min-width:1190px) {
    .mt-container {
      width: 1190px;
    }
  }

// flex
.d-flex {
  display: flex
}
@each $key, $value in $flex-dir {
  .flex-#{$key} {
    flex-direction: $value
  }
}
@each $key, $value in $flex-wrap {
  .flex-#{$key} {
    flex-wrap: $value
  }
}

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value 
  }
}
@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value 
  }
}
.flex-1 {
  flex: 1
}
.flex-grow-1 {
  flex-grow: 1
}


// spacing
@each $typeKey, $type in $spacing-types {
  // m-10
  @each $val in $spacing-sizes {
    .#{$typeKey}-#{$val} {
      #{$type}: $val * $spacing-base-size
    }
  }
  // mx-10
  @each $val in $spacing-sizes {
    .#{$typeKey}y-#{$val} {
      #{$type}-top: $val * $spacing-base-size;
      #{$type}-bottom: $val * $spacing-base-size
    }
    .#{$typeKey}x-#{$val} {
      #{$type}-left: $val * $spacing-base-size;
      #{$type}-right: $val * $spacing-base-size
    }
  }
  // ml-10
  @each $directionKey, $direction in $spacing-directions {
    @each $val in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$val} {
        #{$type}-#{$direction}: $val * $spacing-base-size
      }
    }
  }
}

// margin 0 auto
@each $val in $spacing-sizes {
  .m-#{$val}-auto {
    margin: $val*$spacing-base-size auto;
  }
}

// boder
.border {
  border: 1px solid $border-color;
  border-radius: .2rem;
}

@each $var in (top, bottom, left, right) {
  .border-#{$var} {
    border-#{$var}: 1px solid $border-color;
  }
}

// 定义动画样式
.fade-in, .fade-out, .lazyImg {
  animation-duration:.5s;
  animation-iteration-count:1;
  animation-delay:0s
}

@keyframes fadeInAni {
  0% {
      opacity:0
  }
  100% {
      opacity:1
  }
}
@keyframes fadeOutAni {
  0% {
      opacity:1
  }
  100% {
      opacity:0
  }
}
.fade-in {
  animation-name:fadeInAni
}
.fade-out {
  animation-name:fadeOutAni
}
.lazyImg {
  animation-name:fadeInAni
}